<template>
  <div>


      <div class="mainPad">

        <div class="bussinessPad">

          <ul class="bussinessList">
            <li v-for="item in list" :key='item'>
              <div class="businessCard" @click = "toInfo(item.businessId)">
              <div class="bussinessicon">
                <img class="listimg" :src=item.businessImg>
              </div>

              <div class="list1">
                <div class="font-bold my-1.5">{{item.businessName}}</div>
                <div class="stars">
                  ￥{{item.starPrice}}起送 | ￥{{item.deliveryPrice}}配送
                </div>
                <div>各种饺子炒饭</div>
              </div>


            </div>
            </li>
          </ul>

        </div>
      </div>


    </div>
</template>

<script setup lang="ts">
import store from "../store";
import {onBeforeMount, onMounted, ref} from "vue";
import axios from "axios";
import router from "../router";

function setTitle(){
  store.state.tit="商家列表"
}

onBeforeMount(()=>{
  setTitle()
})
onMounted(()=>{
  getList()
})

const list = ref([])
const getList = () =>{
  axios.get('/path/business/queryByOrderType?type='+ localStorage.getItem('type'),{

  })
      .then(function (res){
        list.value = res.data;
        console.log(res.data)
      })
}

const toInfo = (id: any)=>{
  localStorage.id = id
  router.push('/business')
  console.log(id)
}

</script>

<style scoped>


.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative;
}

.businessCard{
  @apply m-1 flex flex-row justify-start items-center
  border border-solid border-gray-100;
}

.bussinessPad img{
  @apply w-20 h-20 m-1 justify-self-stretch;
}

.bussinessPad .list1{
  @apply flex flex-col m-1 text-sm;
}

.bussinessPad .list1 .fa-star{
  @apply text-yellow-400 text-xs;
}

.bussinessPad .list2{
  @apply flex flex-col text-right text-sm;
}

.barPad div {
  @apply basis-1/4 text-center;
}

.barPad i {
  @apply text-2xl;
}

.barPad {
  @apply flex flex-row h-16 justify-center content-center items-center
  border border-solid border-gray-300 shadow-lg
  bottom-0 sticky;
}
</style>